<template>
  <div class="wrapper">
    <Heder
      @handleNextClick="handleNextClick"
      :headline="'管理收货地址'"
      :next="'新建'"
    />
    <div class="content" v-if="JSON.stringify(list) !== '[]'">
      <div class="title">我的收货地址</div>
      <div
        class="item"
        @click="handleInfoClick(item._id)"
        v-for="(item, index) in list"
        :key="index"
      >
        <div class="item__info">
          <div class="item__userinfo">
            <div class="item__userinfo__name">{{ item.name }}</div>
            <div class="item__userinfo__phone">{{ item.phone }}</div>
          </div>
          <div class="item__address">
            {{ item.city }}{{ item.department }}{{ item.houseNumber }}
          </div>
        </div>
        <div class="item__next iconfont">&#xe6aa;</div>
      </div>
    </div>
    <div class="empty" v-else>还没有地址哦，快去添加地址吧</div>
  </div>
</template>

<script>
import { useRouter } from "vue-router";
import Heder from "./Header.vue";
import { reactive, toRefs } from "vue";
import { get } from "../../utils/request";
const useClickEffect = () => {
  const router = useRouter();
  const handleBackClick = () => {
    router.back();
  };
  /**
   * 新建地址路由
   */
  const handleNextClick = () => {
    router.push("/setAddress");
  };
  /**
   * 修改地址路由
   */
  const handleInfoClick = (index) => {
    router.push(`/addressInfo/${index}`);
  };
  /**
   * 获取地址列表数据
   */
  const getAddressList = () => {
    let address = reactive({
      list: [],
    });
    /**
     * get请求
     */
    const getList = async () => {
      const { data } = await get("api/user/address");
      if (data.errno === 0) {
        address.list = data.data;
      }
    };
    const { list } = toRefs(address);
    return { list, getList };
  };
  return { getAddressList, handleBackClick, handleNextClick, handleInfoClick };
};

export default {
  name: "myAddress",
  components: { Heder },
  setup() {
    const {
      getAddressList,
      handleBackClick,
      handleNextClick,
      handleInfoClick,
    } = useClickEffect();
    const { list, getList } = getAddressList();
    getList();
    return { handleBackClick, handleNextClick, handleInfoClick, list };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/viriables.scss";
.wrapper {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: $color-f8f8;
}
.content {
  position: absolute;
  top: 0.44rem;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 0.16rem 0.18rem 0;
  overflow-y: scroll;
}
.title {
  font-size: 0.14rem;
  color: $content-fontcolor;
  margin-bottom: 0.12rem;
}
.item {
  display: flex;
  margin-bottom: 0.16rem;
  background-color: $color-fff;
  padding: 0.18rem 0.16rem;
  border-radius: 0.04rem;
  &__info {
    flex: 1;
  }
  &__userinfo {
    display: flex;
    font-size: 0.14rem;
    color: $color-999;
    line-height: 0.2rem;
    &__name {
      margin-right: 0.66rem;
    }
  }
  &__address {
    margin-top: 0.08rem;
    width: 2.6rem;
    font-size: 0.14rem;
    color: $content-fontcolor;
  }
  &__next {
    color: $color-999;
    font-size: 0.18rem;
    margin-top: 0.26rem;
  }
}
.empty {
  position: absolute;
  left: 0;
  right: 0;
  top: 0.44rem;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.2rem;
  color: $color-999;
}
</style>